<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <style>
        img {
            width: 115px;
            height: 172px;
        }

        .search {
            margin-top: 10px;
            margin-left: 2px;
            width: 450px !important;
            float: left;
            display: inline-block !important;
        }

        .icon {
            cursor: pointer;
            margin-left: 5px;
            margin-top: 10px;
            display: inline-block !important;
            float: left;
        }

        .book-info {
            position: absolute;
            left: 160px;
            top: 10px;
            height: 150px;
            width: 550px;
            overflow: hidden;
        }

        .book-sale {
            position: absolute;
            left: 800px;
            top: 45px;
            height: 120px;
            width: 500px;
        }

        .detail {
            margin-top: 7px;
            font-size: 14px;
        }

        .author {
            margin-top: 5px;
            font-size: 13px;
        }

        .price {
            margin-top: 5px;
            color: #ff2832;
            font-size: 18px;
        }

        .title {
            margin-top: 5px;
            font-size: 18px;
            color: #2e6da4;
        }

        .book-number {
            margin-left: 40px;
            margin-top: 70px;
            width: 100px;
            margin-bottom: 30px;
            float: left;
        }

        .number-value {
            text-align: center;
            width: 30px;
            height: 30px;
        }

        .list-group-item {
            margin-left: 100px;
            margin-right: 100px;
        }

        .list-group-horizontal {
            padding-right: 50px;
        }

        .buy{
            float: left;
            margin-top: 70px;
            margin-left: 40px;
            margin-right: 50px;
        }

        .delete{
            margin-top: 70px;
        }


        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
        .sum{
            margin-top: 70px;
            float: left;
            font-size: 20px;
            color: red;
            margin-left: 50px;
        }
        .price-sum{
            font-size: 24px;
            color: firebrick;
            display: inline-block;
            margin-right: 150px;
        }
        .cart-sum{
            margin-bottom: 5px;
        }
        .checkout{
            margin-left: 600px;
            margin-bottom: 10px;
            padding-top: 5px;
        }

    </style>
</head>
<body>
<link rel="stylesheet" th:href="@{/css/bootstrap-3.3.7.css}">
<script th:src="@{/script/jquery-2.1.1.js}"></script>
<script th:src="@{/script/bootstrap-3.3.7.js}"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" th:href="@{/user/order}">图书交易系统</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a th:href="@{/user/order}">我的订单</a></li>
                <li><a th:href="@{/user/cart}">购物车</a></li>
                <input type="text" placeholder="请输入图书名" class="form-control search" name="username"
                       id="username"/>
                <div class="icon">
                    <svg t="1670244573250" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                         p-id="918" width="30" height="30">
                        <path d="M909.632 854.528l-259.712-259.712c40.32-52.096 62.08-115.84 62.08-182.848a298.24 298.24 0 0 0-87.872-212.096A297.792 297.792 0 0 0 411.968 112a298.24 298.24 0 0 0-212.096 87.872A297.6 297.6 0 0 0 112 411.968c0 80.128 31.36 155.52 87.872 212.16a297.6 297.6 0 0 0 212.096 87.872 297.6 297.6 0 0 0 182.72-62.016l259.712 259.584c3.2 3.2 8.384 3.2 11.584 0l43.584-43.52a8.192 8.192 0 0 0 0-11.52z m-339.2-284.16a222.784 222.784 0 0 1-158.464 65.6 222.784 222.784 0 0 1-158.4-65.536 222.784 222.784 0 0 1-65.6-158.464c0-59.776 23.36-116.096 65.664-158.4a222.784 222.784 0 0 1 158.336-65.6c59.84 0 116.16 23.232 158.4 65.664a222.784 222.784 0 0 1 65.6 158.336c0 59.84-23.296 116.16-65.536 158.4z"
                              p-id="919" fill="#707070">
                        </path>
                    </svg>
                </div>

                <li><a href="#">个人信息</a></li>
                <li><a th:href="@{/logout}">退出系统</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">jmeter</a></li>
                        <li><a href="#">EJB</a></li>
                        <li><a href="#">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="#">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="checkout">
    <div class="price-sum"></div>
    <button type="button" class="btn btn-success btn-lg cart-sum" onclick="aa()">结算购物车</button>
</div>

<ul class="list-group-horizontal">
    <li class="list-group-item" th:each="book:${cartList}" >
        <a href="#" class="book-img"><img th:src="'http://'+${book.bookUrl}" alt="着魔"></a>
        <div class="book-info">
            <div class="title" th:text="${book.bookName}" th:value="${book.bookName}">着魔</div>
            <div class="author" th:text="${book.bookAuthor}">赫尔曼·布洛赫</div>
            <!--            <div class="price" th:text="'¥'+${book.bookPrice}">¥78.00</div>-->
            <div class="detail" th:text="${book.bookDetail}">
                《着魔》是曾获诺贝尔文学奖提名、被誉为“中欧最伟大的四位小说家”之一的奥地利作家赫尔曼·布洛赫的长篇小说代表作。故事发生在“一战”后十年，讲述了一个流浪汉来到一个小山村后，用他致命的、有害的思想污染了整个村庄，导致全体村民陷入着魔状态，继而引发了一系列邪恶事件……
            </div>
        </div>
        <div class="book-sale">
            <div class="book-number">
                <input class="btn btn-primary btn-sm" type="button" value="-"
                       onclick="reduce(this)"/>
                <div th:id="${book.bookId}" style="visibility:hidden;"></div>
                <input class="number-value" type="number" id="number-value" th:value="${book.bookNum}"/>
                <input class="btn btn-primary btn-sm" type="button" value="+"
                       onclick="add(this)"/>
            </div>
            <div class="sum" th:text="'共'+${book.bookPrice}+'元'">共78元</div>
            <button type="button" class="btn btn-primary buy" th:data-id="${book.bookId}"  th:data-op="${book.cartTime}" onclick="byBook(this)">购买书籍</button>
            <button type="button" class="btn btn-danger delete" th:data-id="${book.bookId}" th:data-op="${book.cartTime}"onclick="deleteOrder(this)">删除</button>
        </div>

    </li>
</ul>
<script th:inline="javascript">
    function byBook(object){
        let id=$(object).data("id");
        let num=$(`#${id}`).next().val()
        fetch('http://localhost:8080/user/cart/'+$(object).data("id")+"/"+$(object).data("op"),{
            headers: {
                'content-type': "application/x-www-form-urlencoded"
            },
            method: "DELETE"
        })
        fetch('http://localhost:8080/user/buyOrder/'+$(object).data("id")+"/"+num,{
            headers: {
                'content-type': "application/x-www-form-urlencoded"
            },
            method: "GET"
        }).then(()=>{
            window.location.href='http://localhost:8080/user/order'
        })
    }
    function deleteOrder(object){
        fetch('http://localhost:8080/user/cart/'+$(object).data("id")+"/"+$(object).data("op"), {
            headers: {
                'content-type': "application/x-www-form-urlencoded"
            },
            method: "DELETE"
        }).then(()=>{
            window.location.href='http://localhost:8080/user/cart'
        })

    }
    aa= function(){
        let nameList = [[${nameList}]]
        let x = nameList.toString()
        fetch('http://localhost:8080/user/order', {
            headers: {
                'content-type': "application/x-www-form-urlencoded"
            },
            method: "GET",

        }).then(res=>{
            window.location.href='http://localhost:8080/user/order/'+x;
        })


    }


    function reduce(obj) {
        let num = $(obj).next()
        if (num.val() === '') {
            num.val(1);
        }
        if (parseInt(num.val()) > 1) {
            num.val(parseInt(num.val()) - 1);
        }

    }

    function add(obj) {
        let num = $(obj).prev()
        if (num.val() === '') {
            num.val(1);
        }
        num.val(parseInt(num.val()) + 1);
    }
</script>
</body>
</html>